#keyboard-white {
    position        : fixed;
    bottom          : 0;
    left            : 0;
    width           : 100vw;
    height          : 30vh;
    background-color: black;
    display         : flex;
    justify-content : center;
    z-index         : 100;
}

.key-white {
    width        : 14.28%;
    height       : 100%;
    background   : linear-gradient(-30deg, #f5f5f5, #fff);
    border       : 1px solid #ccc;
    box-shadow   : inset 0 1px 0 #fff, inset 0 -1px 0 #fff, inset 1px 0 0 #fff, inset -1px 0 0 #fff, 0 4px 3px rgb(0 0 0 / 70%);
    border-radius: 0 0 5px 5px;
}

.key-white:active {
    background: linear-gradient(-30deg, #f5f5ff, #999);
}

.key-black {
    position  : fixed;
    bottom    : 15vh;
    width     : 9%;
    height    : 15vh;
    background: linear-gradient(-30deg, #555, #111);
    box-shadow: 2px 3px 5px #888888;
    z-index   : 101;
}

.key-black:active {
    background: linear-gradient(-30deg, #999, #333);
}

.key-black1 {
    left: 9%;
}

.key-black2 {
    left: 24%;
}

.key-black3 {
    left: 53%;
}

.key-black4 {
    left: 67%;
}

.key-black5 {
    left: 82%;
}
